import "./Main.css";
import { Layout, Menu, Breadcrumb } from "antd";
import {
  DesktopOutlined,
  PieChartOutlined,
  FileOutlined,
  TeamOutlined,
  UserOutlined,
} from '@ant-design/icons';
import {
  Route,
  Redirect,
  Link
} from "react-router-dom";
import index from "./../index/index"
import banner from "./../Banner/Banner"
import OperLog from "./../index/OperLog"
import CouponManage from "./../CouponManage/CouponManage"
import HomeManage from "./../HomeManage/HomeManage"
import OrderManagement from "./../OrderManagement/OrderManagement"
import RoleManagement from "./../RoleManagement/RoleManagement"
import UserManagement from "./../UserManagement/UserManagement"


const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;
const Main = () => {
  return (
    <Layout>
      <Header className="header">
        <div className="logo" />
        <Menu theme="dark" mode="horizontal" defaultSelectedKeys={["2"]}>
          {/* <Menu.Item key="1">nav 1</Menu.Item>
          <Menu.Item key="2">nav 2</Menu.Item>
          <Menu.Item key="3">nav 3</Menu.Item> */}
        </Menu>
      </Header>
      <Layout className="menuh">
        <Sider width={200} className="site-layout-background" >
          <Menu
            mode="inline"
            defaultSelectedKeys={["1"]}
            defaultOpenKeys={["sub1"]}
            style={{ height: "100%", borderRight: 0 }}
            theme="dark"
          >
            <Menu.Item key="1" icon={<PieChartOutlined />}>
              <Link to="/main/index">首页</Link>
            </Menu.Item>
            <SubMenu key="sub1" icon={<UserOutlined />} title="民宿管理">
              <Menu.Item key="2"><Link to="/main/homemanage">民宿管理</Link></Menu.Item>
              <Menu.Item key="3"><Link to="/main/ordermanagement">订单管理</Link></Menu.Item>
              <Menu.Item key="4"><Link to="/main/couponmanage">优惠券管理</Link></Menu.Item>
            </SubMenu>
            <SubMenu key="sub2" icon={<TeamOutlined />} title="权限管理">
              <Menu.Item key="5"><Link to="/main/usermanagement">用户管理</Link></Menu.Item>
              <Menu.Item key="6"><Link to="/main/rolemanagement">用户角色管理</Link></Menu.Item>
            </SubMenu>
            <Menu.Item key="7" icon={<FileOutlined />}>
            <Link to="/main/operlog">操作日志</Link>
            </Menu.Item>
            <Menu.Item key="8" icon={<DesktopOutlined />}>
            <Link to="/main/banner">Banner列表</Link>
            </Menu.Item>
          </Menu>
        </Sider>
        <Layout style={{ padding: "0 24px 24px" }}>
          <Breadcrumb style={{ margin: "16px 0" }}>
            {/* <Breadcrumb.Item>Home</Breadcrumb.Item>
            <Breadcrumb.Item>List</Breadcrumb.Item>
            <Breadcrumb.Item>App</Breadcrumb.Item> */}
          </Breadcrumb>
          <Content
            className="site-layout-background"
            style={{
              padding: 24,
              margin: 0,
              minHeight: 280,
            }}
          >
               <Redirect exact from="/main" to="/main/index"></Redirect>
               <Route path="/main/index" component={index}></Route>
               <Route path="/main/usermanagement" component={UserManagement}></Route>
               <Route path="/main/rolemanagement" component={RoleManagement}></Route>
               <Route path="/main/ordermanagement" component={OrderManagement}></Route>
               <Route path="/main/homemanage" component={HomeManage}></Route>
               <Route path="/main/couponmanage" component={CouponManage}></Route>
               <Route path="/main/operlog" component={OperLog}></Route>
               <Route path="/main/banner" component={banner}></Route>
          </Content>
        </Layout>
      </Layout>
    </Layout>
  );
};

export default Main;
